import React, { Component } from 'react'
import { Switch, Route, Link, withRouter } from 'react-router-dom'
import { SwitchTransition, CSSTransition } from 'react-transition-group'

import Home from './views/Home'
import About from './views/About'

class App extends Component {
  render() {
    return (
      <div>
        <div>
          <Link to="/home">首页</Link>&nbsp;&nbsp;|&nbsp;&nbsp;
          <Link to="/about">关于</Link>
        </div>
        <hr />
        <SwitchTransition>
          <CSSTransition
            // 如果你的路由模式为history建议用 this.props.location.key
            // 如果你的路由模式为hash只能用 this.props.location.pathname
            key={this.props.location.key}
            timeout={{
              appear: 600,
              enter: 600,
              exit: 0
            }}
            classNames="router"
            unmountOnExit
            appear
          >
            <Switch>
              <Route path="/home" component={Home} />
              <Route path="/about" component={About} />
            </Switch>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}

export default withRouter(App)
